<template>
  <div class="CollapseItemContainer" :class="{ border_bottom: borderAtive, active_down: active }">
    <div @click="activeFn" v-outsider="outsiderFn" :class="{ CollapseItem: true, borderAtive: borderAtive }">
      <div class="left">
        <div :class="{ icon: true, IconActive: active }">
          <Icon-arrow-right width="16" height="16" />
        </div>
        <div class="title_Icon">
          <component v-if="!active" :is="left_Icon.default.name" v-bind="{ ...left_Icon.default }"></component>
          <component v-else :is="left_Icon.active.name" v-bind="{ ...left_Icon.active }"></component>
        </div>
        <div class="inputName" v-if="title === ''">
          <input autofocus type="text" @blur="blurHandleFn" @click.stop="handleClickFn" v-model.trim="newName"
            class="input">
        </div>
        <div class="title ellipsis" v-else>{{ title }}</div>
      </div>
      <div class="right" v-if="active">
        <slot name="right_Icon"></slot>
      </div>
    </div>
    <div class="content">
      <slot name="content"></slot>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
interface itemType {
  name: string,
  width?: number,
  height?: number,
}
interface propsType {
  default: itemType,
  active: itemType,
}
const props = defineProps({
  left_Icon: {
    required: false,
    type: Object as () => propsType,
    default: {
      default: {
        name: 'Icon-folder-close',
        width: 16,
        height: 16,
      },
      active: {
        name: 'Icon-file-open',
        width: 16,
        height: 16,
      }
    }
  },
  title: {
    require: true,
    type: String,
  }
})
const active = ref<Boolean>(false)
const borderAtive = ref<Boolean>(false)

const activeFn = () => {
  active.value = !active.value
  borderAtive.value = true
}

const outsiderFn = (isOutSider: boolean) => {
  borderAtive.value = isOutSider
}
onMounted(() => {
  console.log(props.title);
})
const newName = ref(props.title)
const activeInput = ref(false)
const handleClickFn = () => {
  borderAtive.value = false
  activeInput.value = true
}
const blurHandleFn = (e: FocusEvent) => {
  e.stopPropagation()
  borderAtive.value = false
  activeInput.value = false
}
</script>
<style scoped lang="less">
.CollapseItemContainer {
  width: 100%;
  --item_heigth: 24px;
  height: calc(var(--item_heigth) + 1px);
  transition: all 0.5s ease;
  overflow: hidden;

  &:last-child .CollapseItem {
    border-bottom: 1px solid transparent;

  }

  .CollapseItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 0 5px;
    border: 1px solid transparent;
    // border-bottom: 1px solid var(---E5E5CB);
    height: var(--item_heigth);

    .left {
      display: flex;
      align-items: center;
      width: 80%;

      .inputName {
        width: 100%;

        .input {
          width: 100%;
          color: var(---E5E5CB);
          border: 1px solid transparent;
          outline: none;
          background-color: transparent;

          &:focus {
            border: 1px solid var(---E5E5CB);
          }
        }
      }

      .title {
        width: 80%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .title_Icon,
      .icon {
        display: flex;
        align-items: center;
      }

      .icon {
        margin-right: 2px;
      }
    }

    .right {
      display: flex;
      align-items: center;
      column-gap: 2px;

      .icon:hover {
        border-radius: 2px;
        overflow: hidden;
        background-color: var(---E5E5CB);
      }
    }
  }

  .content {
    width: 100%;
    height: calc(100% - var(--item_heigth));
  }

  .IconActive {
    transform: rotate(90deg);
  }
}

.borderAtive {
  border: 1px solid var(--active) !important;
}

.active_down {
  flex: 1;
}

.border_bottom {
  border-bottom: 1px solid transparent;
}
</style>